<template>
  <div class="basic-from" v-dialogDrag>
    <el-dialog
      custom-class="small-padding-dialog"
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      @close="handleClosed"
    >
      <el-form
        :model="formData"
        ref="form"
        class="form-wrap"
        style="padding-top:0px;display: block"
        :rules="rules"
        label-position="top"
        label-width="40%"
      >
        <div v-for="formItem in formItemList" :key="formItem.prop">
          <el-form-item
            v-if="formItem.type==='input'"
            :label="formItem.label"
            :prop="formItem.prop"
          >
            <el-input v-model="formData[formItem.prop]" placeholder="请输入" />
          </el-form-item>
          <el-form-item
            v-if="formItem.type==='select'"
            :label="formItem.label"
            :prop="formItem.prop"
          >
            <el-select
              clearable
              v-model="formData[formItem.prop]"
              @change="handleChang(formItem.change)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in formItem.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="formItem.type==='radio'"
            :label="formItem.label"
            :prop="formItem.prop"
            class="radio-line-height"
          >
            <el-radio-group v-model="formData[formItem.prop]" placeholder="请选择">
              <el-radio
                v-for="item in formItem.options"
                :key="item.key"
                :label="item.title"
                :value="item.label"
              />
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="formItem.type==='datetime'"
            :label="formItem.label"
            :prop="formItem.prop"
          >
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="formData[formItem.prop]"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            v-if="formItem.type==='cascader'"
            :label="formItem.label"
            :prop="formItem.prop"
          >
            <el-cascader v-model="formData[formItem.prop]" :options="formItem.options"></el-cascader>
          </el-form-item>
        </div>
      </el-form>

      <slot name="custom"></slot>

      <div slot="footer">
        <el-button type="primary" @click="save">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 *  @param {string} label   // 表单名称
 *  @param {string} value   // 表单值
 *  @param {string} key   // 表单key值
 *  @param {string} type   // 组件类型 input 输入框 select 下拉框  redio 单选框 time 时间  textarea 多文本输入框
 *  @param {Array} options   // 组件类型 select redio 数据
 */
import { getDict } from '@/utils';

export default {
  name: 'hotelDialog',
  inject: ['initList'],
  props: {
    // form表单数据
    formItemList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    title: {
      type: String,
      default: '查看',
    },
    width: {
      type: String,
      default: '50%',
    },
    rules: {}
  },
  data() {
    return {
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {},
      // 校验
    };
  },
  computed: {

  },
  methods: {
    // 日期格式化
    inputFormat(value) {
      if (!['date', 'datetime', 'daterange', 'datetimerange', 'year', 'month'].includes(value)) return '';
      switch (value) {
        case 'date':
        case 'daterange':
          return 'yyyy-MM-dd';
        case 'month':
          return 'MM';
        case 'year':
          return 'yyyy';
        default:
          return 'yyyy-MM-dd HH:mm:ss'
      }
    },
    filterList(name) {
      return getDict(name)
    },
    // 更改弹窗状态
    async changeVisible() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 提交新增
    async save() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.$emit('submit');
      });
    },
    // 弹窗关闭还原
    handleClosed() {
      this.dialogVisible = false;
      this.$emit('close');
      this.$refs.form.resetFields()
    },

    handleChang(change) {
      console.log('change', change)
      if (change) {
        this.$emit('item-change');
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
  .album {
    .el-col {
      margin-bottom: 20px;
    }
    .img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
